<!--
  * @Author: zhw 443844039@qq.com
  * @Date: 2025-08-23 19:51:13
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-23 20:07:34
  * @Description: 科研绩效
 -->
 <template>
  <div class="panel">
    <div class="header">
      <div class="title-wrapper">
        <div class="blue-line"></div>
        <h3>科研绩效</h3> 
      </div>
    </div>
    <div id="researchChart" ref="researchChart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { theScientificResearchApi } from '@/api/operationAnalysis'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.researchChart)
      theScientificResearchApi().then(res => {
        let xData = []
        let count = []
        let totalBudget = []
        res.data.forEach(item => {
          xData.push(item.collageName)
          count.push(item.count)
          totalBudget.push(item.totalBudget)
        });
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            y:'bottom',
            data: ['科研项目数', '总经费（万元）']
          },
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '科研项目数',
              type: 'line',
              step: 'start',
              data: count,
              itemStyle: {
                color: '#945FB9'
              }
            },
            {
              name: '总经费（万元）',
              type: 'line',
              step: 'middle',
              data: totalBudget,
              itemStyle: {
                color: '#1990FF'
              }
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.panel {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  margin: 0 12px;
}

.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>